<template>
	<view class="detail">
		<view class="fixBg" :style="{'background-image': 'url('+songDetail.al.picUrl+')'}"></view>
		<musichead :title="songDetail.name" :icon="true" color="#F8F8F8"></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songDetail.al.picUrl" :class="{'detail-play-run':isPlayRotate}"></image>
					<text class="iconfont" :class="iconplay" ></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:'translateY('+-(lyricIndex-1)*82+'rpx)'}">
						<view class="detail-lyric-item" :class="{active:lyricIndex==index}" v-for="(item,index) in songLyric" :key="index">
							{{item.lyric}}
						</view>
					
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">
						喜欢这首歌的人也听
					</view>
					<view class="detail-like-item" v-for="(item,index) in simiSong" :key="item.id" @tap="handletoNewSong(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.blurPicUrl" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>{{item.name}}</view>
							<view>
								<image v-if="item.privilege.fee=='1'" src="../../static/vip.png" mode=""></image>
								<image v-if="item.privilege.maxbr=='999000'" src="../../static/SQ.png" mode=""></image>
								{{item.artists[0].name}}-{{item.name}}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">
						精彩评论
					</view>
					<view class="detail-comment-item" v-for="(item,index) in comment" :key="item.commentId" >
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
										<view>{{item.user.nickname}}</view>
										<view>{{item.timeStr}}</view>
								</view>
								<view class="detail-comment-like">
									{{item.likedCount | formatCount}} <text class="iconfont icon-icon"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{item.content}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musichead from '../../components/music_head/music_head.vue'
	import '@/common/iconfont.css'
	import { songDetail,comment,simiSong,lyric,songUrl } from '../../common/api.js'
	export default {
		data() {
			return {
				songDetail:{
					al:{
						picUrl:''
					}
				},
				simiSong:[],
				comment:[],
				lyric:{},
				songLyric:[],
				lyricIndex:0,
				// bgAudioManager:{},
				iconplay: 'icon-zanting',
				isPlayRotate:true,
				isLoading: true
			}
		},
		onLoad(options) {
			this.getMusic(options.songId)
		},
		onUnload() {
			this.cancelLyricIndex()
		},
		onHide() {
			this.cancelLyricIndex()
		},
		components:{
			musichead
		},
		methods: {
			
			
			getMusic(songId){
				this.$store.commit('NEXT_ID',songId)
				uni.showLoading({
					title:'加载中。。。'
				})
				this.isLoading = true
				Promise.all([ songDetail(songId),simiSong(songId),comment(songId),lyric(songId),songUrl(songId) ]).then(res=>{
					if(res[0][1].data.code=='200'){
						this.songDetail = res[0][1].data.songs[0]
						
					}
					
					if(res[1][1].data.code=='200')
					this.simiSong = res[1][1].data.songs
					
					if(res[2][1].data.code == '200')
					this.comment= res[2][1].data.hotComments
					
					
					if(res[3][1].data.code == '200'){
						this.lyric = res[3][1].data.lrc
						
						let re =/\[([^\]]+)\]([^\[]+)/g;
						let result = []
						this.lyric.lyric.replace(re,($0,$1,$2)=>{
							result.push({"time":this.formatTime($1),"lyric":$2})
						})
						
						this.songLyric = result
						// console.log(this.songLyric)
					}
					
					if(res[4][1].data.code =='200') {
						
						// #ifdef MP-WEIXIN
						this.bgAudioManager = uni.getBackgroundAudioManager();
						this.bgAudioManager.title = this.songDetail.name
						// #endif
						
						// #ifdef H5
						this.bgAudioManager = uni.createInnerAudioContext()
						this.iconplay = 'icon-bofang'
						this.isPlayRotate = false
						// #endif
						
						this.bgAudioManager.src=res[4][1].data.data[0].url || ''
						this.listenLyricIndex()
						this.bgAudioManager.onPlay(()=>{
							this.iconplay = 'icon-zanting'
							this.isPlayRotate = true
							this.listenLyricIndex()
						})
						this.bgAudioManager.onPause(()=>{
							this.iconplay = 'icon-bofang'
							this.isPlayRotate = false
							this.cancelLyricIndex()
						})
						this.bgAudioManager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId)
						})
						
					}
					this.isLoading = false
					uni.hideLoading()
				})
			},
			formatTime(value) {
				let arr = value.split(':')
				return (parseFloat(arr[0]*60) + Number(arr[1])).toFixed(1);
			},
			handleToPlay() {
				if(this.bgAudioManager.paused) 
					this.bgAudioManager.play()
				else this.bgAudioManager.pause()
			},
			listenLyricIndex(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for(var i=0;i<this.songLyric.length;i++)
					{
						if(this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length-1].time){
							this.lyricIndex =this.songLyric.length-1
							break
						}
						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i+1].time)
							this.lyricIndex = i
							
					}
					console.log(this.lyricIndex)
				},500)
			},
			cancelLyricIndex() {
				clearInterval(this.timer)
			},
			handletoNewSong(songId) {
				this.getMusic(songId)
			}
		}
	}
</script>

<style scoped>
	.music-head { color: #F8F8F8; }
	.detail-play{ width: 580rpx; height: 580rpx; background: url(~@/static/disc.png); background-size: cover; margin: 214rpx auto 0 auto; position: relative;}
	.detail-play image{ width: 370rpx; height: 370rpx; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; animation: 10s linear move infinite; animation-play-state: paused;}
	.detail-play .detail-play-run{ animation-play-state: running; }
	@keyframes move{
		from{transform: rotate(0deg);}
		to{transform: rotate(360deg);}
	}
	.detail-play text{ width: 100rpx; height: 100rpx; font-size: 100rpx; color: white; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
	.detail-play view{ width: 230rpx; height: 360rpx; background: url(~@/static/needle.png); position: absolute; left: 100rpx; right: 0; top: -200rpx; margin: auto; background-size: cover; }
	
	.detail-lyric {font-size: 32rpx; line-height: 82rpx; height: 246rpx; text-align: center; overflow: hidden; color: #808080;}
	.detail-lyric-wrap{ transition: .5s;}
	.detail-lyric-item{ height: 82rpx; }
	.detail-lyric-item.active { color: #F8F8F8; }
	
	.detail-like{ margin: 0 30rpx; }
	.detail-like-head{ font-size: 36rpx; color: white; margin: 50rpx 0; }
	.detail-like-item{ display: flex; align-items: center; margin-bottom: 28rpx;}
	.detail-like-img{ width: 82rpx; height: 82rpx; border-radius: 20rpx; overflow: hidden; margin-right: 20rpx;}
	.detail-like-img image{ width: 100%; height: 100%; }
	.detail-like-song {flex: 1; color: #555555;}
	.detail-like-song view:nth-child(1){ font-size: 28rpx; color: #F8F8F8; margin-bottom:12rpx}
	.detail-like-song view:nth-child(2){ font-size: 22rpx; }
	.detail-like-song image{ width: 26rpx; height: 20rpx; margin-right: 10rpx; }
	.detail-like-item text{ font-size: 50rpx; color: #959595;}
	
	.detail-comment { margin: 0 30rpx; }
	.detail-comment-head{ font-size: 36rpx; color: #F8F8F8; margin: 50rpx 0;}
	.detail-comment-item{ margin-bottom: 28rpx; display: flex;}
	.detail-comment-img{ width: 64rpx; height: 64rpx; border-radius: 50%; overflow: hidden; margin-right: 18rpx;}
	.detail-comment-img image{ width: 100%; height: 100%; }
	.detail-comment-content{ flex: 1; color: #808080;}
	.detail-comment-title{ display: flex; justify-content: space-between; }
	.detail-comment-name{ }
	.detail-comment-name view:nth-child(1){ font-size: 26rpx; }
	.detail-comment-name view:nth-child(2){ font-size: 24rpx; }
	.detail-comment-like{ font-size: 28rpx; }
	.detail-comment-text{ font-size: 28rpx; line-height: 40rpx; color: #F8F8F8; margin-top: 22rpx;border-bottom: 1px #ccc solid;padding-bottom: 40rpx;}
</style>
